<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-05-22 11:50:22
 * @Descripttion: 
--> 
<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="企业名称">
          <el-input v-model="formInline.user" placeholder="请输入企业名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜 索</el-button>
        </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12" align="right">
        <!-- <el-button type="primary" @click="addCustomer">+ 添加客户</el-button> -->
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="companyName" label="企业名单">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">{{scope.row.companyName}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="areaName" label="区域">
      </el-table-column>
      <el-table-column prop="householdsNum" label="户号数量">
      </el-table-column>
      <el-table-column prop="contacts" label="负责人">
      </el-table-column>
      <el-table-column prop="phone" label="手机号">
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button @click="delDeptExt(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="margin-top: 8px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableTotal"
    ></el-pagination>
    <!-- 编辑客户弹框 -->
    <el-dialog title="客户信息" :visible.sync="dialogFormVisible1" width="20%">
      <el-form :model="programForm" ref="programForm" :rules="programFormRules" label-width="100px">
        <el-form-item label="企业名称" prop="name" placeholder="请输入企业名称" style='width: 300px'>
          <el-input v-model="programForm.name"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="contacts" placeholder="请输入负责人姓名" style='width: 300px'>
          <el-input v-model="programForm.contacts"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" placeholder="请输入手机号" style='width: 300px'>
          <el-input v-model="programForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="选择区域" prop="area" style='width: 300px'>
          <el-select v-model="programForm.provinceCode" placeholder="请选择" @change="getCityList($event)">
            <el-option
              v-for="item in provinceList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="programForm.cityCode" placeholder="请选择" @change="getAreaList($event)">
            <el-option
              v-for="item in cityList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="programForm.areaCode" placeholder="请选择">
            <el-option
              v-for="item in areaList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="info" @click="submitCustomer">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { apiGetDeptExt, apiPostDeptExt, apiDelDeptExt } from "../../../api/customerfiles/deptExt";
  import { apiGetArea } from "../../../api/customerfiles/area";

  export default {
    data() {
      var validateProvinceCityArea = (rule, value, callback) => {
        let provinceStatus = 
          this.programForm.provinceCode == null ||
          this.programForm.provinceCode == "" ||
          this.programForm.provinceCode == undefined;
        let cityStatus = 
          this.programForm.cityCode == null ||
          this.programForm.cityCode == "" ||
          this.programForm.cityCode == undefined;
        let areaStatus = 
          this.programForm.areaCode == null ||
          this.programForm.areaCode == "" ||
          this.programForm.areaCode == undefined;
        if (provinceStatus || cityStatus || areaStatus) {
          callback(new Error("请选择区域"));
        } else {
          callback();
        }
      };
      return {
        provinceList: [], // 省
        cityList: [], // 市
        areaList: [], // 县
        dialogFormVisible1: false,
        tableData: [],
        tableTotal: 0,
        pageIndex: 1,
        pageSize: 10,
        programForm: {
          id: 0,
          name: "",
          contacts: "",
          phone: "",
          provinceCode: "",
          cityCode: "",
          areaCode: ""
        },
        programFormRules: {
          "name": [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
          "contacts": [{ required: true, message: '请输入负责人姓名', trigger: 'blur'}],
          "phone": [{ required: true, message: '请输入手机号', trigger: 'blur' }],
          "area": [{ required: true, validator: validateProvinceCityArea, trigger: "blur" }]
        },
        formInline: {
          user: ''
        }
      }
    },
    created() {
      this.getDeptExt()
      this.getArea(0, 1)
    },
    methods: {
      getCityList(val){
        this.getArea(val, 2)
        this.programForm.cityCode = ''
        this.programForm.areaCode = ''
        this.areaList = []
      },
      getAreaList(val){
        this.getArea(val, 3)
        this.programForm.areaCode = ''
      },
      getArea(pid, type){
        let paramObj = '';
        if (pid == undefined) {
          paramObj = {pid: 0}
        }else{
          paramObj = {pid: pid}
        }
        apiGetArea(paramObj)
        .then(res => {
          let newAreaList = []
          res.forEach(element => {
            newAreaList.push({value: element.areaId, label: element.name})
          });
          switch (type) {
            case 1:
              this.provinceList = newAreaList;
              break;
            case 2:
              this.cityList = newAreaList;
              break;
            case 3:
              this.areaList = newAreaList;
              break;
          }
        })
        .catch(error => {
          console.log(error);
        });
      },
      getDeptExt(){
        let paramObj = { 
          deptExtName: this.formInline.user, 
          page: this.pageIndex,
          size: this.pageSize }
        apiGetDeptExt(paramObj)
        .then(res => {
          let dataList = res.content;
          console.log('dataList');
          console.log(dataList);
          let newDataList = [];
          if (dataList.length > 0) {
            dataList.forEach(element => {
              newDataList.push({ 
                id: element.id,
                deptId: element.deptId,
                companyName: element.name,
                areaName: element.deptArea,
                householdsNum: element.households == null ? 0 : element.households.length,
                contacts: element.contacts,
                phone: element.phone
              });
            });
          }
          console.log(newDataList);
          this.tableData = newDataList;
          this.tableTotal = res.totalElements;
        })
        .catch(error => {
          console.log(error);
        });
      },
      onSubmit() {
        this.getDeptExt()
      },
      resetForm(){
        this.formInline.user = '';
      },
      handleClick(row) {
        this.$router.push({path:'/customerfiles/customerInfo',query:{deptId:row.deptId}})
      },
      delDeptExt(val){
        let idList = [];
        idList.push(val);
        apiDelDeptExt(idList)
          .then(res => {
            this.$message({
              type: "success",
              message: "执行成功!"
            });
            this.getDeptExt()
          })
          .catch(error => {
            console.log(error);
          });
      },
      handleSizeChange(val) {
      },
      handleCurrentChange(val) {
      },
      addCustomer(){
        if (this.$refs['programForm'] !== undefined) {
          this.$refs['programForm'].resetFields();
        }
        this.dialogFormVisible1 = true;
      },
      submitCustomer(){
        this.$refs.programForm.validate(valid => {
          if (valid) {
            apiPostDeptExt(this.programForm)
              .then(res => {
                this.$message({
                  type: "success",
                  message: "执行成功!"
                });
                this.dialogFormVisible1 = false
                this.getDeptExt()
              })
              .catch(error => {
                console.log(error);
              });
          }
        });
      }      
    }
  }
</script>
